<template>
  <div class="star-content-container">
    <div class="star-content-left">
      <el-input class="tree-input" v-model="filterText" placeholder="请输入过滤条件" :suffix-icon="Search" />
      <el-tree
        ref="treeRef"
        :data="dataTree"
        node-key="value"
        :highlight-current="true"
        :default-expanded-keys="[0]"
        :expand-on-click-node="false"
        @node-click="handleClickNode"
        :filter-node-method="filterNode"
      >
        <template #default="{ node, data }">
          <el-dropdown trigger="contextmenu">
            <span class="el-dropdown-link">
              <el-tooltip
                effect="light"
                :content="node.label"
                placement="right"
              >
                {{ node.label }}
              </el-tooltip>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item v-if="data.attr.type !== '0'" :icon="Plus" @click="rightAddNode(node, data)">新增</el-dropdown-item>
                <el-dropdown-item v-if="data.value !== '0'" :icon="Minus" @click="rightDeleteNode(node, data)">
                  删除
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-tree>
    </div>
    <div class="star-content-right">
      <privilege-tab :id="dataId" :fid="dataFid" @change-data="loadTree" @reload-data="reloadData" />
    </div>

    <el-dialog
      center
      draggable
      title="权限管理"
      destroy-on-close
      v-model="visibleForm"
      :close-on-click-modal="false"
    >
      <privilege-form :fid="clickNodeId" @close-dialog="closeDialog" @reload-data="reloadData" />
    </el-dialog>
  </div>
</template>

<script setup>
import { ElTree, ElMessageBox, ElMessage } from 'element-plus'
import { onMounted, ref, watch } from 'vue'
import { Search, Plus, Minus } from '@element-plus/icons-vue'
import privilegeForm from '@/views/system/privilege/PrivilegeForm.vue'
import privilegeTab from '@/views/system/privilege/PrivilegeTab.vue'
import { loadPrivilegeTree, deleteData } from '@/api/system/privilege/PrivilegeManager'

import '@/style/layout.less'

const treeRef = ref()
const dataId = ref('')
const dataFid = ref('0')
const dataTree = ref([])
const filterText = ref('')
const visibleForm = ref(false)
const clickNodeId = ref('')

const filterNode = (value, data) => {
  if (!value) return true
  return data.label.includes(value)
}

watch(filterText, (val) => {
  treeRef.value.filter(val)
})

const handleClickNode = (node) => {
  if (node.attr.type === '0') {
    dataId.value = node.value
    return
  }
  // 文件夹不传id，传fid，文件夹打开列表
  dataId.value = ''
  dataFid.value = node.value
}

const loadTree = () => {
  loadPrivilegeTree().then(data => {
    dataTree.value = data
  })
}

onMounted(() => {
  loadTree()
})

const rightAddNode = (node, data) => {
  clickNodeId.value = data.value
  visibleForm.value = true
}

const rightDeleteNode = (node, data) => {
  ElMessageBox.confirm('是否删除权限？')
    .then(() => {
      deleteData(data.value).then(() => {
        ElMessage.success('删除成功！')
        filterTreeNode(dataTree.value, data)
      }).catch(error => {
        ElMessage.error(error.message)
      })
    })
    .catch(() => {
      // catch error
    })
}

const filterTreeNode = (node, data) => {
  if (node.length > 0) {
    if (node.includes(data)) {
      node.splice(node.indexOf(data), 1)
    } else {
      for (const item of node) {
        filterTreeNode(item.children, data)
      }
    }
  }
}

const closeDialog = () => {
  visibleForm.value = false
}

const reloadData = () => {
  console.log(' ppp tab reload ')

  loadTree()
}

</script>

<style lang="less" scoped>
@import '../../../style/tree.less';
</style>
